<template>
    <div class="choosegoods">
        <div class="title">为你精选</div>
        <router-link to="/details" tag="div" class="shopCont">
            <div class="box" v-for="item of list" :class="item.num == 1 ? 'change': '' ">
                <div class="img">
                    <img :src="item.img1" alt="">
                    <span>{{item.name}}</span>
                </div>
                <p class="msg">{{item.msg}}</p>
                <div class="footer">
                    <span class="price">{{item.price}}</span>
                    <img :src="item.img2" alt="">
                </div>
            </div>
        </router-link>
    </div>
</template>

<script>
    export default{
        name:"HomeChoosegoods",
        props:{
            list:Array
        }
    }
</script>

<style lang="stylus" scoped>
.title
    width 3.55rem
    height 0.3rem
    line-height 0.3rem
    margin 0 auto
    margin-top 0.1rem
    text-align left
    font-size: 0.18rem
    color: rgb(51, 51, 51)
    font-weight: 600
.shopCont
    width 3.55rem
    margin 0 auto 
    .box
        float left
        position relative
        width 1.7rem
        height 2.82rem
        margin-top 0.1rem
        border: 1px solid rgb(237, 237, 237)
        .img
            position relative
            width 100%
            height 1.68rem
            text-align center
            background-color rgba(0, 0, 0, 0.03)
            img 
                width 1.38rem
                height 1.38rem
                margin-top 0.15rem
            span 
                position absolute    
                bottom -0.08rem
                left 0
                margin-right: 0.1rem;
                margin-left: 0.1rem
                padding-left: 0.05rem
                padding-right: 0.05rem
                line-height 0.18rem
                font-size 0.1rem
                color #fff
                background-color rgb(136, 163, 192)
        .msg
            width 1.48rem
            font-size: 0.16rem
            margin-top 0.15rem
            margin-left: 0.1rem
            text-align: left
            line-height: 0.2rem
            color: rgb(0, 0, 0)
        .footer
            position absolute    
            bottom 0
            left 0.1rem
            width 1.5rem
            height 0.4rem
            .price
                float left
                font-size: 0.18rem
                text-align: left
                font-weight: 600
                color: rgb(255, 0, 0)
                line-height: 0.4rem
            img 
                float right
                width 0.75rem
    .change
        margin-right 0.1rem  
</style>

